// EmailLogin 组件的 HTML 模板

/**
 * 渲染组件模板
 * @param {HTMLElement} shadowRoot - 组件的 shadow root
 * @param {string} css - 样式字符串
 */
export function render(shadowRoot, css) {
    shadowRoot.innerHTML = `
        <style>${css}</style> 
        <div class="email-login-container">
            <!-- 登录弹窗 -->
            <div class="login-modal" id="loginModal">
                <div class="login-form-container">
                    <!-- 关闭按钮 -->
                    <sl-icon-button 
                        name="x-lg" 
                        class="close-btn" 
                        id="closeBtn"
                        label="关闭">
                    </sl-icon-button>

                    <!-- 登录表单头部 -->
                    <div class="login-header">
                        <h2 class="login-title">欢迎回来</h2>
                        <p class="login-subtitle">请输入您的邮箱和密码登录</p>
                    </div>

                    <!-- 登录表单 -->
                    <form class="login-form" id="loginForm">
                        <div class="form-group">
                            <label class="form-label" for="email">邮箱地址</label>
                            <sl-input
                                id="loginEmail"
                                name="email"
                                type="email"
                                placeholder="请输入您的邮箱地址"
                                class="login-input"
                                required>
                                <sl-icon name="envelope" slot="prefix"></sl-icon>
                            </sl-input>
                            <div class="error-message" id="loginEmailError"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="loginPassword">密码</label>
                            <sl-input
                                id="loginPassword"
                                name="password"
                                type="password"
                                placeholder="请输入您的密码"
                                class="login-input"
                                required
                                password-toggle>
                                <sl-icon name="lock" slot="prefix"></sl-icon>
                            </sl-input>
                            <div class="error-message" id="loginPasswordError"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="loginCaptcha">验证码</label>
                            <div class="captcha-container">
                                <sl-input
                                    id="loginCaptcha"
                                    name="captcha"
                                    type="text"
                                    placeholder="请输入验证码"
                                    class="login-input captcha-input"
                                    required>
                                    <sl-icon name="shield-check" slot="prefix"></sl-icon>
                                </sl-input>
                                <div class="captcha-image-container">
                                <!--                                     src="http://localhost:3000/users/captcha"    -->
                                <!--                                     onclick="function(){ this.src='http://localhost:3000/users/captcha?'+Date.now() }"-->
                                    <img id="captchaImage" 
                                         class="captcha-image" 
                                         alt="验证码"
                                         style="cursor: pointer;" />
                                    <sl-button 
                                        variant="text" 
                                        size="small" 
                                        class="refresh-captcha-btn"
                                        id="refreshCaptcha">
                                        <sl-icon name="arrow-clockwise"></sl-icon>
                                        刷新
                                    </sl-button>

                                </div>
                            </div>
                            <div class="error-message" id="loginCaptchaError"></div>
                        </div>

                        <div class="login-actions">
                            <sl-button 
                                type="submit" 
                                variant="primary" 
                                size="medium" 
                                class="login-btn"
                                id="submitBtn">
                                <sl-icon name="box-arrow-in-right" slot="prefix"></sl-icon>
                                登录
                            </sl-button>

                            <div class="forgot-password">
                                <a href="#" class="register-account-link" id="registerAccount">
                                    注册账号
                                </a>
                                <a href="#" class="forgot-password-link" id="forgotPassword">
                                    忘记密码？
                                </a>
                            </div>
                        </div>

                        <!-- 分割线 -->
                        <div class="divider">
                            <span>或者</span>
                        </div>

                        <!-- 社交登录 -->
                        <div class="social-login">
                            <sl-button 
                                variant="default" 
                                size="medium" 
                                class="social-btn"
                                id="googleLogin">
                                <sl-icon name="google" slot="prefix"></sl-icon>
                                Google
                            </sl-button>
                            <sl-button 
                                variant="default" 
                                size="medium" 
                                class="social-btn"
                                id="githubLogin">
                                <sl-icon name="github" slot="prefix"></sl-icon>
                                GitHub
                            </sl-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
}